<template>
	<div class="money">
		<div class="style">
			<p></p>
			<span></span>
		</div>
		<div class="con">
			<div class="top">
				<div class="border"></div>
				<p>您的天机卡余额(元)</p>
				<span>{{data.money}}</span>
				<p>元</p>
			</div>
			<div class="bottom">
				<p>您有一笔500元的交易已转入余额<router-link to='/user/personal/remind'>去查看></router-link></p>
				<!-- <input type="button" value="充 值" @click='showPayment = true'> -->
			</div>
		</div>
        <payment :showList='[1,2]' :show='showPayment' v-model="showPayment"></payment>
	</div>
</template>

<script>
import Payment from '@/components/common/payment/Payment'
import { allMoney } from '../../../../config/getData'

export default {
    data(){
        return {
            data:[],
            showPayment: false
        }
    },
    methods:{
    },
    created(){
        allMoney().then( res => {
            this.data = res.rows
        })
    },
    components:{
        Payment
    }
}
</script>


<style lang="scss" scoped>
@import '../../../../assets/css/all';

.money{position: absolute;left:0;top:0;width:100%;height: 100%;background-color: white;overflow: hidden;
	.style{position: absolute;z-index: 0;pointer-events: none;width:100%;height: 100%;
		p{width:0;height: 0;padding: 320px;background-color: #F34F4F;border-radius: 50%;position: absolute;left: -40px;bottom:-320px;}
		span{display: block;@include wh(0,0);background-color: white;padding:200px;border-radius: 50%;box-shadow: 0 0 40px rgba(0,0,0,.5);position: absolute;left:-80%;bottom:-280px;}
	}
	.con{color:#F12B2C;text-align:center;height: 100%;
		.top{padding-top: 43px;
			.border{width:31px;height: 3px;border-radius: 10px;background-color: #333;margin:0 auto 33px;}
			p{font-size: 16px;}
			span{font-size: 50px;font-weight: bold;margin:6px 0;display: block;}
		}
		.bottom{position: absolute;left:0;bottom:80px;width:80%;left:10%;
			p{color:white;font-size: 16px;width:100%;margin:0 auto;}
			a{display: block;color:white;text-decoration: underline;}
			input{background-color: #FFF35C;color: #F12B2C;border:none;width: 100%;height: 56px;border-radius: 100px;font-size: 20px;margin-top:40px;box-shadow: 0 4px 16px rgba(0,0,0,.2);}
		}
	}
}
</style>

